import React, { Component } from 'react'
import Homecss from "../scss/Home.module.scss"
import Swip from "./Swip"
import axios from "axios"

export default class Home extends Component {
    state = {
        goods:[]
    }
    /* 跳转详情页 */
    linkProduct = (pid) => {
        // 1. 进行路由跳转
        this.props.history.push("product/"+pid);
    }
    /* 跳转分类 */
    toClassify = () => {
        this.props.history.push("classify")
    }
    /* 跳转搜索 */
    toSearch = () => {
        console.log("进入搜索");
        this.props.history.push("search")
        
    }
    componentDidMount() {
        axios.get("http://s.linweiqin.com/api/s/getProducts").then(res => {
            this.setState({
                goods:res.data.wdata
            })
        })
    }
    render() {
        return (
            <div className={Homecss.home}>
                {/* 主页头部 */}
                <div className={Homecss.homeHeader}>
                    <div className={Homecss.homeHeaderLef} onClick={this.toClassify}><span className="iconfont">&#xe65a;</span></div>
                    <div className={Homecss.homeHeaderCen}>并夕夕团购</div>
                    <div className={Homecss.homeHeaderRig} onClick={this.toSearch}><span className="iconfont">&#xe63f;</span></div>
                </div>
                {/* 主体部分 */}
                <div className={Homecss.homeBody}>
                    {/* 主页轮播图部分 */}
                    <div className={Homecss.homeBanner}>
                        <Swip></Swip>
                    </div>
                    {/* 主页导航 */}
                    <div className={Homecss.homeNav}>
                        <div className={Homecss.homeNavItem}><div className={Homecss.homeNavItemImg}><img src="https://www.17sucai.com/preview/177065/2016-09-12/Sc-5/images/nav01.png" alt="" /></div>大聚惠</div>
                        <div className={Homecss.homeNavItem}><div className={Homecss.homeNavItemImg}><img src="https://www.17sucai.com/preview/177065/2016-09-12/Sc-5/images/nav02.png" alt="" /></div>海外购</div>
                        <div className={Homecss.homeNavItem}><div className={Homecss.homeNavItemImg}><img src="https://www.17sucai.com/preview/177065/2016-09-12/Sc-5/images/nav03.png" alt="" /></div>超市百货</div>
                        <div className={Homecss.homeNavItem}><div className={Homecss.homeNavItemImg}><img src="https://www.17sucai.com/preview/177065/2016-09-12/Sc-5/images/nav04.png" alt="" /></div>海外直销</div>
                        <div className={Homecss.homeNavItem}><div className={Homecss.homeNavItemImg}><img src="https://www.17sucai.com/preview/177065/2016-09-12/Sc-5/images/nav05.png" alt="" /></div>美食娱乐</div>
                    </div>
                    {/* 商城客户 */}
                    <div className={Homecss.homeShops}>
                        <div className={Homecss.homeShopsTitle}>商城客户</div>
                        <div className={Homecss.homeShopsBox}>
                            <div className={Homecss.homeShopsItem}>
                                <img src="https://www.17sucai.com/preview/177065/2016-09-12/Sc-5/images/scyh0.jpg" alt="" />海绵包包
                        </div>
                            <div className={Homecss.homeShopsItem}>
                                <img src="http://linweiqin.cn/ygshop/static/media/customer02.526a0ee6.jpg" alt="" />韩国代购
                        </div>
                            <div className={Homecss.homeShopsItem}>
                                <img src="http://linweiqin.cn/ygshop/static/media/customer03.519be062.jpg" alt="" />ARL超力
                        </div>
                            <div className={Homecss.homeShopsItem}>
                                <img src="http://linweiqin.cn/ygshop/static/media/customer04.22b962e7.jpg" alt="" />欧力女装
                        </div>
                        </div>
                    </div>
                    {/* 精选促销 */}
                    <div className={Homecss.homeSelect}>
                        <div className={Homecss.homeSelectTitle}>精选促销</div>
                        <div className={Homecss.homeSelectgoods}>

                            {this.state.goods.map((item, index) => {
                                return (
                                <div key={item.pid+"你个人才"} className={Homecss.homeSelectItem} onClick={this.linkProduct.bind(this,item.pid)}>
                                    <img key={item.pid} src={item.product_url} alt="" />
                                    <div key={item.pid+"你好"} className={Homecss.homeSelectItemTro}>{item.product_name}</div>
                                    <div key={index} className={Homecss.homeSelectItemPri}><span>￥{item.product_price}</span><b>￥{item.product_origin_price}</b></div>
                                </div>
                                )
                            })}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
